<><template>
    <div class="Login">
       <div class="moveLogin">
        <img src="@/assets/img/login.png" alt="">
           <div class="phoen">
           <span>手机号:</span>
          <i  class="el-icon-mobile-phone"></i>
            <input type="text"  v-model="phone" value="" />
          </div>
          <div class="password margin-buttom" >
           <span>密码:</span>
           <i class="el-icon-lock"></i>
           <input type="password"  v-model="password" value="121" />
          </div>
            <div class="login" @click="setClien">登录</div>
            <div class="toResigter"><u>注册</u></div>
       </div>
         
        
    </div>
</template>

<script>
export default {
   name:"login",
    data(){
      return{
        password:'',
        phone:"",
      }
    },
    methods:{
       async setClien(){
         let  res = await this.$request("/login/cellphone", {
        phone: this.phone,
        password: this.password,
        withCredentials: true,
      });
          // console.log(res.data)
         if(res.data.code!==200) return  this.$message('账号或者密码错误');
        
        this.$message({
            message: '登录成功',
            type: 'success'
         });
        //  localStorage.setItem("cookie", JSON.stringify(res.data.cookie));
          this.$Store.commit("PresonUser",res.data.profile)
           localStorage.setItem("userName",JSON.stringify(res.data.profile));
      },
    }
   
}
</script>

<style lang="less" scoped>
     .Login{
    padding:700px 400px 0 0;
     .toResigter{
       text-align:center;
     }
    .login{
      margin:20px auto;
      width:200px;
      height:35px;
      background-color:#E94848;
      color:#fff;
      border-radius:6px;
      line-height:35px;
      text-align:center;
    }
     .moveLogin{
       margin-bottom:20px;
       width:360px;
       height:400px;
       background-color:#fff;
       border:1px solid #aaa;
       img{
         width:350px;
         height:160px;
   
       }
       .phoen,.password{
         position:relative;
         margin:0 auto;
         width:100%;
         height:40px;
         padding:5px 0;
         display:flex;
        span{
         width:100px;
         height:35px;
         line-height:40px;
         padding-right:10px;
         text-align:right;
         color:#000;
        }
         input{
           line-height:40px;
           padding-left:30px;
           outline:none;
           width:200px;
           height:35px;
           background-color:#fff;
           border-radius:4px;
          border:1px solid #aaa;
         }
         i{
             line-height:40px;
             position:absolute;
             left:110px;
             top:1px;
         }
       }
     }

     }
</style>